<!-- 会员列表页面 -->
<template>
  <div class="members-list">
    <div class="members-head">
      <navHead></navHead>
    </div>
    <div class="members-foot">
      <!-- 数据筛选部分 -->
      <el-card class="box-card first-card">
        <div slot="header" class="clearfix">
          <span>数据筛选</span>

          <!-- 设置高级搜索的样式加粗,字体为微软雅黑 -->
          <el-button
            style="
              float: right;
              padding: 3px 0;
              color: #0079fe;
              font-weight: 700;
              font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
            "
            type="text"
            @click="advancedSearch"
            >高级搜索</el-button
          >
        </div>
        <div class="members-foot-item">
          <div>
            <span>会员编号：</span>
            <span>
              <input placeholder="用户编号" />
            </span>
          </div>
          <div>
            <span>姓名：</span>
            <span>
              <input placeholder="请输入会员姓名" />
            </span>
          </div>
          <div>
            <span>会员电话：</span>
            <span>
              <input type="text" placeholder="选择注册时间" />
            </span>
          </div>
          <div class="members-foot-btn">
            <el-button size="small" type="primary" icon="el-icon-search"
              >查询</el-button
            >
            <el-button size="small" plain icon="el-icon-arrow-left"
              >重置</el-button
            >
          </div>
        </div>
      </el-card>

      <!-- 数据列表 -->
      <el-card class="box-card second-card">
        <div slot="header" class="members-foot-card-title">
          <span>数据列表</span>
          <el-button @click="dialogFormVisible = true" plain
            >转移拓展人</el-button
          >
        </div>
        <div class="members-foot-table">
          <table>
            <thead>
              <tr>
                <th>
                  <el-checkbox v-model="checked" />
                </th>
                <th>编号</th>
                <th></th>
                <th>账号</th>
                <th>账号性质</th>
                <th>主体名称</th>
                <th>实名认证</th>
                <th>所在城市</th>
                <th>最近登录时间</th>
                <th>订单数量</th>
                <th>最近购买时间</th>
                <th>最近跟进时间</th>
                <th>最近跟进状况</th>
                <th>拓展人</th>
                <th>注册日期</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableData" :key="item.id">
                <td>
                  <el-checkbox v-model="checked" />
                </td>
                <td>{{ item.date }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.date }}</td>
                <td>
                  <el-link
                    @click="toMembers_details"
                    type="primary"
                    :underline="false"
                    >查看</el-link
                  >
                  &nbsp;
                  <el-link type="primary" :underline="false">编辑</el-link>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <!-- 分页 -->
        <div class="members-foot-bottom">
          <div class="members-foot-bottom-btn">
            <el-button size="small" icon="el-icon-circle-check" plain
              >全选</el-button
            >
            <el-button size="small" icon="el-icon-full-screen" plain
              >反选</el-button
            >
            <el-select
              style="margin: 0 10px"
              size="small"
              v-model="value"
              disabled
              placeholder="批量操作"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="prev, pager, next,sizes"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-card>
    </div>

    <!-- 转移拓展人弹出框 -->

    <el-dialog title="转移跟进人员" :visible.sync="dialogFormVisible">
      <el-card class="box-card dialog-card">
        <div slot="header" class="clearfix">
          <span>一线销售列表</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>张三</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>李四</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>张三</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>李四</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>张三</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>李四</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>张三</span>
        </div>
        <div class="clearfix dialog-card-div">
          <el-radio />
          <span>李四</span>
        </div>
      </el-card>
      <!-- 转移拓展人弹出框分页 -->
      <el-pagination
        class="pagination"
        style="text-align: right; width: 100%; height: 60px; padding-top: 26px"
        @size-change="handleSizeChange"
        background
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="prev, pager, next,sizes"
        :total="20"
      >
      </el-pagination>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 高级搜索(advancedSearch) -->
    <el-dialog
      title="高级搜索"
      class="search"
      :visible.sync="centerDialogVisible"
    >
      <hcmsearch></hcmsearch>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="padding: 3px 0; margin: 0 16px 0 0; font-weight: 900"
          type="text"
          >高级搜索</el-button
        >
        <el-button
          @click="centerDialogVisible = false"
          style="color: #0079fe; font-weight: bloder; border: 1px solid #0079fe"
          >取 消</el-button
        >
        <el-button
          style="font-weight: bloder"
          type="primary"
          @click="centerDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import navHead from "@/components/members/members_list_com.vue";
import hcmsearch from "@/components/members/HCMsearch.vue";
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      centerDialogVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    toMembers_details() {
      console.log(this);
      this.$router.push({
        path: "/members_details",
      });
    },
    advancedSearch() {
      this.centerDialogVisible = true;
    },
  },
  components: {
    navHead,
    hcmsearch,
  },
};
</script>

<style lang="scss" scoped>
.members-list {
  width: 99%;
  height: 100%;
  margin: auto;
  box-sizing: border-box;
}

.members-list > .members-head {
  margin: auto;
  margin-bottom: 20px;
}

.members-list > .members-foot {
  width: 80%;
  margin: auto;
}

.members-list > .members-foot .first-card {
  margin: 20px auto;
  font-size: 20%;
}

.members-list > .members-foot .members-foot-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.members-list > .members-foot .members-foot-item > div {
  // height: 2rem;
  // line-height: 2rem;
  width: 238px;
  padding: 0;
}

.members-list > .members-foot .members-foot-item > div input {
  // width: 180px;
  // height: 35px;
  width: 60%;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  outline: none;
  border-style: solid;
  border-color: rgba(215, 215, 215, 1);
  border-radius: 3px;
  box-shadow: none;
  font-family: "PingFangSC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  // font-size: 14px;
  color: #bcbcbc;
  text-align: left;
  padding: 2px 2px 3px 10px;
  box-sizing: border-box;
}

.members-list > .members-foot div .members-foot-btn {
  width: 180px;
}

.members-list > .members-foot div .members-foot-btn button {
  width: 44%;
  text-indent: -4px;
}

.members-list > .members-foot div .members-foot-card-title span {
  margin-right: 2%;
}

.members-list > .members-foot div .members-foot-table {
  overflow-x: scroll;
  margin: auto;
}

/* 高级搜索 */
.el-dialog__headerbtn .el-dialog__close {
  font-weight: 900;
  color: #999999;
}

.el-dialog .el-dialog__title {
  font-weight: 900;
  margin: 10px 0;
}

.members-list ::v-deep .search .el-dialog__header {
  border-bottom: 1px solid #e4e4e4;
  padding: 10px 20px 8px 15px;
  background-color: #f2f2f2;
}

.members-list ::v-deep .search .el-dialog__body {
  width: 600px;
}

.members-list ::v-deep .search .el-dialog {
  width: 650px !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-left: 700px;
  height: 750px;
}

.members-list ::v-deep .search .el-dialog__footer {
  margin: -56px 0 0 0;
}

.members-list > .members-foot div .members-foot-table table {
  text-align: center;
  margin: auto;
  width: 1850px;
}

.members-list ::v-deep .search_bottom {
  border-bottom: 0 !important;
}

.members-list > .members-foot div .members-foot-table table thead {
  background-color: #f5f5f5;
}

.members-list > .members-foot div .members-foot-table table tr th,
.members-list > .members-foot div .members-foot-table table tr td {
  width: 118px !important;
  height: 45px;
  line-height: 45px;
  border: 1px solid #e9e9e9;
  text-align: center;
}

.members-list > .members-foot ::v-deep .second-card {
  padding-bottom: 18px;
}

// 分页

.members-list > .members-foot .members-foot-bottom {
  display: flex;
  justify-content: space-between;
}

.members-list > .members-foot div .el-pagination {
  float: right;
}

// 转移拓展人弹出框
.members-list ::v-deep .el-dialog {
  width: 469px !important;
  height: 732px;
}

.members-list ::v-deep .el-dialog .dialog-card {
  width: 389px;
  height: 460px;
  margin: auto !important;
}

.members-list ::v-deep .el-dialog .dialog-card .el-card__body {
  padding: 0;
}

.members-list ::v-deep .el-dialog .dialog-card .dialog-card-div {
  height: 52px;
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  line-height: 46px;
  box-sizing: border-box;
  padding: 0 20px;
}

.members-list ::v-deep .search {
  width: 40%;
}

.members-list ::v-deep .search .search_box {
}

.members-list ::v-deep .pagination {
  height: 60px;
  line-height: 60px;
  padding-top: 6px;
}

.members-list ::v-deep .pagination input,
.members-list ::v-deep .pagination li,
.members-list ::v-deep .pagination button {
  height: 35px;
  line-height: 35px;
}

.members-list ::v-deep .el-dialog__footer {
  padding: 12px;
  height: 60px;
  border-top: 1px solid #e4e4e4;
}
</style>